<template>
  <el-container class="account-number">
    <el-main>
      <el-card shadow="never" class="selectCard searchColumn">
        <el-form label-position="right" label-width="6rem">
          <el-row :gutter="40">
            <el-col :span="6">
              <el-form-item label="用户姓名：">
                <el-input v-model="params.name" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="登录账号：">
                <el-input v-model="params.userCode" maxlength="11" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电话：">
                <el-input v-model="params.mobile" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <SearchButton :default-params="params" @refreshParams="refreshParams" @getList="getList1" />
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card shadow="never" class="tableCard">
        <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: getList1}" />
        <vxe-table
          ref="xTable"
          border
          resizable
          highlight-hover-row
          :loading="loading"
          :auto-resize="true"
          :data="tableData"
          width
          max-height="500"
          :print-config="{}"
        >
          <vxe-table-column type="seq" width="50" title=" " />
          <vxe-table-column field="userCode" width="150" title="登录账号">
            <template slot-scope="scope">
              <div>(+86){{ scope.row.userCode }}</div>
            </template>
          </vxe-table-column>
          <vxe-table-column field="name" min-width="120" title="用户姓名" />
          <vxe-table-column field="mobile" min-width="120" title="电话" />
          <vxe-table-column field="roleName" width="150" title="角色" />
          <vxe-table-column field="publishStatusDesc" width="150" title="状态" />
          <vxe-table-column field="jobDesc" width="150" title="在职" />
          <vxe-table-column title="操作" fixed="right" align="center" width="150" slots="default">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="relevanceRole(scope.row.id)">配置角色</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :current-page.sync="params.pageNum"
          :page-size.sync="params.pageSize"
          :total="total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          @page-change="getList()"
        />
      </el-card>
    </el-main>
    <el-dialog v-if="roleDialog" title="配置角色" :close-on-click-modal="false" :visible.sync="roleDialog">
      <vxe-table
        ref="role"
        border
        stripe
        resizable
        highlight-hover-row
        :data="roleList"
        height="350"
        :auto-resize="true"
      >
        <vxe-table-column type="checkbox" width="35" />
        <vxe-table-column field="name" title="角色名称" />
      </vxe-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleDialog = false">取 消</el-button>
        <el-button type="primary" @click="setRole">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import SearchButton from '@/components/SearchButton'
import { getCpUserList, getRoleList, getRolesByUserId, modifyByUserId } from '@/api/cpPermission'

export default {
  components: {
    SearchButton
  },
  data() {
    return {
      phoneNum: '0',
      roleParams: {
        publishStatus: 1,
        pageNum: 1,
        pageSize: 20
      },
      roleTotal: 0,
      fileList: [],
      addParams: {},
      dialogFormVisible: false,
      roleDialog: false,
      roleList: [],
      title: '',
      params: {
        pageNum: 1,
        pageSize: 20
      },
      tableData: [],
      total: 0,
      loading: false,
      nowUserId: ''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getUrl(arr) {
      if (arr.length === 0) {
        this.addParams.image = ''
      } else {
        this.addParams.image = arr[0].name
      }
    },
    relevanceRole(id) {
      this.nowUserId = id
      this.roleDialog = true
      this.getRoleInfo()
    },
    getRoles() {
      getRolesByUserId(this.nowUserId).then(res => {
        res.forEach((item, index) => {
          this.roleList.forEach((it, idx) => {
            if (item === it.id) {
              this.$refs.role.setCheckboxRow(this.roleList[idx], true)
            }
          })
        })
      })
    },
    getRoleInfo() {
      getRoleList(this.roleParams).then(res => {
        this.roleList = res.records
        this.roleTotal = res.total
        this.getRoles()
      })
    },
    setRole() {
      const arr = this.$refs.role.getCheckboxRecords().map(item => item.id)
      if (arr.length !== 0) {
        modifyByUserId({
          userId: this.nowUserId,
          roleIds: arr
        }).then(res => {
          this.$message.success('关联成功')
          this.getList()
          this.roleDialog = false
        })
      } else {
        this.$message.error('请选择角色')
      }
    },
    refreshParams(params) {
      this.params = params
      this.getList()
    },
    getList1() {
      this.params.pageNum = 1
      this.getList()
    },
    getList() {
      getCpUserList(this.params).then(res => {
        this.tableData = res.records
        this.total = res.total
      })
    }
  }
}
</script>

<style lang="scss">
.account-number {
  .headerIcon {
    width: 40px;
    height: 40px;
  }
  .base-info {
    display: flex;
    margin-bottom: 20px;
    .icon-upload {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 20px;
      >label {
        margin-bottom: 10px;
        span {
          color: #ff4949;
        }
      }
      .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 5px;
        margin: 0 30px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 150px;
          height: 150px;
          line-height: 150px;
          text-align: center;
        }
      }
    }
    .basics-info {
      width: 100%;
    }
  }
}
</style>
